<template>
  <div v-loading="state.loading">
    <el-steps
      :active="state.active"
      style="width:400px;margin-top:24px;"
      finish-status="success"
    >
      <el-step title="选择移出酒罐"></el-step>
      <el-step title="选择移入酒罐"></el-step>
    </el-steps>
    <el-divider></el-divider>
    <el-row>
      <el-col :span="20">
        <div style="padding-right: 24px;border-right: 1px solid #EFF1F0;">
          <el-form
            ref="baseForm"
            label-width="100px"
            :label-position="'top'"
            style="margin-top: 0;display:flex;"
            class="ht-search-form "
          >
            <el-form-item label="关键字搜索" style="width:338px;">
              <el-input
                placeholder="搜索    酒品名称、酒品代码"
                suffix-icon="el-icon-search"
                v-model="state.filter.keyWord"
                @change="handleSearch"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="关联部门" style="width:338px;margin:0 24px;">
              <ht-select-org
                :clearable="true"
                v-model="state.filter.manageOrganizationUnitId"
                @change="handleSearch"
              ></ht-select-org>
            </el-form-item>
            <el-form-item label="所属酒库" style="width:338px;">
              <SelectWineInventory
                @change="handleSearch"
                v-model="state.filter.WarehouseCode"
              ></SelectWineInventory>
            </el-form-item>
            <el-form-item label="存放酒品" style="width:338px;margin:0 24px;">
              <SelectWine
                @change="handleSearch"
                v-model="state.filter.breedCode"
              ></SelectWine>
            </el-form-item>

            <el-button
              type="primary"
              style="width:60px;height:32px;margin-right:6px;margin-top: 34px;"
              >筛选</el-button
            >
            <el-button
              type=""
              style="width:60px;height:32px;margin-top: 34px;"
              @click="reset"
              >重置</el-button
            >
          </el-form>

          <ht-table
            class="ht-table-no-border"
            :data="state.dataSource"
            @onchange="changePage"
            style="width: 100%; margin-top: 12px"
            border
            pageStyle="text-align:right"
            height="400px"
            highlight-current-row
            :page-info="{
              currentPage: state.filter.currentPage,
              pageSize: state.filter.maxResultCount,
              skipCount: state.filter.skipCount,
              totalCount: state.filter.totalCount,
            }"
            :columns="columns"
          >
            <Temp slot="empty">
              <span slot="tips">暂无数据哦</span>
            </Temp>

            <template slot="wineTrace.wineBreedName" slot-scope="{ row }">
              {{ row?.wineTrace.wineBreedName || '--' }}
            </template>
            <template slot="wineTrace.wineBreedCode" slot-scope="{ row }">
              {{ row?.wineTrace.wineBreedCode || '--' }}
            </template>
            <template slot="warehouseName" slot-scope="{ row }">
              {{ row?.warehouseName || '--' }}
            </template>

            <template slot="wineTrace.qualityConvertBase" slot-scope="{ row }">
              <span v-if="row?.wineTrace.qualityConvertBase"
                >{{ row?.wineTrace.qualityConvertBase }} {{ row.uom }}</span
              >
              <span v-else>--</span>
            </template>
            <template slot="wineTrace.weight" slot-scope="{ row }">
              <span v-if="row?.wineTrace.weight"
                >{{ row?.wineTrace.weight }} {{ row.uom }}</span
              >
              <span v-else>--</span>
            </template>
            <template slot="usableVol" slot-scope="{ row }">
              <span v-if="row?.usableVol">{{ row?.usableVol + ' T' }}</span>
              <span v-else>--</span>
            </template>

            <template slot="wineTrace.creationTime" slot-scope="{ row }">
              {{ row?.wineTrace.creationTime?.replace('T', ' ').slice(0, 16) }}
            </template>
            <template slot="handel" slot-scope="{ row }">
              <el-button
                class="cursor"
                :disabled="getDisable(row)"
                @click="selectRow(row)"
                type="text"
              >
                {{
                  row.sapName == state.outSap.sapName ||
                  row.sapName == state.inSap.sapName
                    ? '当前选择'
                    : '选择'
                }}</el-button
              >
            </template>
          </ht-table>
        </div>
      </el-col>
      <el-col :span="4">
        <div style=" padding-left: 24px;box-sizing: border-box;height:400px;">
          <div class="title" style="font-size: 18px;font-weight: bold;">
            当前已选
          </div>

          <div style="margin-top:24px;">
            <div v-if="state.outSap.sapName">
              <div>移出</div>
              <el-tag closable @close="handleClose('移出')" type="success">
                {{ state.outSap.sapName }}
              </el-tag>
            </div>
            <div v-if="state.inSap.sapName">
              <div>移入</div>
              <el-tag closable @close="handleClose('移入')" type="success">
                {{ state.inSap.sapName }}
              </el-tag>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import SelectWine from '@/components/selectWine.vue';
import SelectWineInventory from '@/components/selectWineInventory.vue';
import Temp from '@/components/temp.vue';
import { Column, PageType } from 'htui-yllkbz/src/packages/type';
import { MergeWareHouseApi, MergeWareHouseAssetPageDto } from '@/plugins/api';
import { _axios } from 'vue-kst-auth';
interface State {
  /** 数据状态 */
  loading: boolean;
  active: any;
  dataSource: any;
  filter: {
    keyWord: string | undefined;
    manageOrganizationUnitId: string | undefined;
    WarehouseCode: string | undefined;
    breedCode: string | undefined;
    skipCount: number;
    maxResultCount: number;
    totalCount: number;
    currentPage: number;
  };
  outSap: MergeWareHouseAssetPageDto;
  inSap: MergeWareHouseAssetPageDto;
}
@Component({
  components: {
    SelectWine,
    SelectWineInventory,
    Temp,
  },
})
export default class Index extends Vue {
  MergeWareHouseApi = new MergeWareHouseApi('/alcohol-management', _axios);
  /** 数据 */
  @Prop() selectIds!: any;
  state: State = {
    loading: false,
    active: 0,
    dataSource: [],
    filter: {
      keyWord: '',
      manageOrganizationUnitId: '',
      WarehouseCode: '',
      breedCode: '',
      skipCount: 0,

      maxResultCount: 20,
      currentPage: 1,
      totalCount: 0,
    },
    outSap: new MergeWareHouseAssetPageDto(),
    inSap: new MergeWareHouseAssetPageDto(),
  };
  /** 生命周期 */
  mounted() {
    this.getDataSource();
  }
  /** 方法 */
  //分页
  changePage(data: PageType) {
    this.state.filter.currentPage = data.currentPage;
    this.state.filter.maxResultCount = data.maxResultCount;
    this.state.filter.skipCount = data.skipCount;
    this.getDataSource();
  }
  // 判断按钮是否被禁用
  getDisable(val: MergeWareHouseAssetPageDto) {
    if (this.selectIds.length !== 0) {
      return this.selectIds.some(
        (item: any) => item.outid == val.id || item.inid == val.id
      );
    }
  }
  handleClose(tag: string) {
    if (tag == '移出') {
      this.state.outSap = new MergeWareHouseAssetPageDto({});
      this.state.active = 0;
    } else {
      this.state.inSap = new MergeWareHouseAssetPageDto({});
      this.state.active = 1;
    }
  }
  handleSearch() {
    this.state.filter.skipCount = 0;
    this.state.filter.currentPage = 1;

    this.getDataSource();
  }
  reset() {
    this.state.filter.keyWord = '';
    this.state.filter.manageOrganizationUnitId = '';
    this.state.filter.WarehouseCode = '';
    this.state.filter.breedCode = '';
    this.getDataSource();
  }

  /** 查询列表 */
  getDataSource() {
    this.state.loading = true;
    const { filter } = this.state;

    this.MergeWareHouseApi.getAssetsPageList(
      filter.keyWord,
      filter.manageOrganizationUnitId,
      filter.WarehouseCode,
      filter.breedCode,
      filter.skipCount,
      filter.maxResultCount
    )
      .then((res: any) => {
        this.state.dataSource = res.items || [];
        this.state.filter.totalCount = res.totalCount || 0;
      })
      .finally(() => {
        this.state.loading = false;
      });
  }
  selectRow(val: MergeWareHouseAssetPageDto) {
    // 移除容器
    if (!this.state.outSap.sapName) {
      this.state.outSap = val;
    }
    if (
      !this.state.inSap.sapName &&
      this.state.active == 1 &&
      this.state.outSap.sapName !== val.sapName
    ) {
      this.state.inSap = val;
    }
  }
  next() {
    if (this.state.active++ > 2) this.state.active = 0;
  }
  /** 监听 */
  get columns(): Column[] {
    return [
      { key: 'sapName', title: '容器名称' },
      { key: 'sapCode', title: '容器编号' },
      //
      { key: 'wineTrace.wineBreedName', title: '存放酒品' },

      { key: 'wineTrace.wineBreedCode', title: '酒品代码' },
      { key: 'wineTrace.creationTime', title: '生产年月' },
      { key: 'warehouseName', title: '所属酒库' },
      { key: 'wineTrace.weight', title: '原酒数量' },
      { key: 'wineTrace.qualityConvertBase', title: '折60度数量' },
      { key: 'usableVol', title: '可用容量' },
      //

      //

      { key: 'handel', title: '操作' },
    ];
  }
  /** 计算属性 */
}
</script>
<style lang="scss" scoped>
.cursor {
  color: var(--primary);
  cursor: pointer;
}
</style>
